<template>
  <div>
    <el-menu
      default-active="0"
      class="el-menu-vertical-demo"
      text-color="#666666"
      active-text-color="#409EFF"
      router
      :unique-opened="true"
    >
      <template v-for="{ children } in Menu">
        <template v-for="(child, index) in children">
          <template v-if="child.children && child.children.length > 1">
            <el-submenu :index="index" :key="index + ''">
              <template slot="title">
                <i :class="child.meta.icon"></i>
                <span>{{ child.meta.menuTitle }}</span>
              </template>

              <template>
                <el-menu-item
                  :key="i + ''"
                  :index="child.path + '/' + ch.path"
                  v-for="(ch, i) in child.children"
                >
                  <i :class="ch.meta.icon"></i>
                  <span>{{ ch.meta.menuTitle }}</span>
                </el-menu-item>
              </template>
            </el-submenu>
          </template>

          <template v-else-if="child.children && child.children.length == 1">
            <el-menu-item
              :key="index + ''"
              :index="child.path + '/' + child.children[0].path"
            >
              <i :class="child.children[0].meta.icon"></i>
              <span>{{ child.children[0].meta.menuTitle }}</span>
            </el-menu-item>
          </template>
        </template>
      </template>
    </el-menu>
  </div>
</template>

<script>
import { mapState } from "vuex";
import { getMenu } from "@/util/util";
export default {
  data() {
    return {};
  },
  created() {},
  methods: {},
  computed: {
    ...mapState("menuRoutes", ["routes"]),
    Menu() {
      return getMenu(this["routes"]);
    },
  },
};
</script>

<style lang="scss" scoped>
.el-menu-vertical-demo {
  height: calc(100vh - 110px);
  min-height: 600px;
  width: 199px;
}
</style>